<template>

  <div class="vote">
       <div class="title">
     <div class="vote-icon">
      <van-image
        round
     width="1.5rem"
     height="1.5rem"
     :src="icon"
    />
    <span class="nickname">{{ nickname }}</span>
     </div>
    <UserCtrl  :id="id"  />
  </div>

    <p class="cont">{{ title }}</p>
    <div class="hot-comment" v-if="hot_comment">
      <div class="comment"><span class="name">{{ hot_comment.name }}:</span>
      <span >{{ hot_comment.comment }}</span>
    </div>
       <div class="belong-place">{{ hot_comment.belong_place }}</div>
     
     </div>

     <CardCtrl :praise_num="praise_num" :answer_num="comment_num" :id="id" :my_up="props"/>
  </div>
</template>

<script setup lang="ts">
import CardCtrl from '../../../../components/CardCtrl.vue'
const props = defineProps<{
  id:number,
  nickname:string,
  icon: string,
  content_type:number,
  title: string,
  praise_num: string,
  comment_num: string,
  hot_comment: {
    name:string,
    comment:string,
    belong_place: string,
    user_id: string,
  },
  vote_detail: {
    vote_id: number,
    content_id: number,
    title: string,
    vote_user_num: string,
    vote_type: number,
    is_end: true,
    share_num: string,
    cover_img: string,
    has_share: false,
    has_comment: false,
    has_praise: false,
    start_time: 0,
    end_time: 0,
    vote_option_list: Array<
        {
            vote_id: number,
            vote_option_id: number,
            description: string,
            sort: 3,
            vote_num: 0,
        }>
},

}>()
 
</script>

<style scoped lang="scss">
.vote {
  padding:10px;
  background-color: #fff;
}
.title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .vote-icon {
  display: flex;
  align-items: center;
  .nickname {
  font-size: .78rem;
  margin-left: .3rem;
}
}

}
.cont {
  margin: .6rem 0rem;
  font-size: .95rem;
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.tag {
  width: 100%;
  margin-bottom: 0.3rem;
  display: flex;
  flex-wrap: wrap;
  .tag-item {
  display: flex;
  align-items: center;
  padding: .3rem 0rem;
  background-color: #f6f6f6;
  margin-right: 1.25rem;
  border-radius: .3rem;
  .tag-name {
  padding: 0px .3rem;
  font-size: .8rem;
  color:#757575;
}
}
}


.hot-comment {
  margin: 10px 0px;
  padding: 10px;
  background-color: #f6f6f6;
  border-radius: .35rem;
  .comment {
  // display: flex;
  font-size: .85rem;
  .name {
  width: 3.75rem;
  color:#757575;
  padding-right: .3rem;
}

}

}

.belong-place {
  font-size: .85rem;
  color:#757575;
}
.video {
  position: relative;
.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  
  font-size: 20rem;
}
}
</style>
